<template>
  <el-card style="width: 100%">
    <el-row>
      <el-col :span="24">
        <p style="font-size: 25px; color: black; font-family: '楷体', serif">
          基本信息设置
        </p>
      </el-col>
    </el-row>
    <el-form
      ref="ruleFormRef"
      style="max-width: 600px"
      :model="form"
      :rules="rules"
      label-width="auto"
      class="demo-ruleForm"
      :size="formSize"
      status-icon
    >
      <el-form-item label="品牌名称：" prop="Brandname">
        <el-input v-model="form.Brandname" maxlength="9" show-word-limit />
      </el-form-item>

      <el-form-item label="会员卡标题" prop="Title">
        <el-input v-model="form.Title" maxlength="9" show-word-limit />
      </el-form-item>

      <el-form-item label="会员卡背景" prop="Background">
        <el-upload
          class="avatar-uploader"
          action="http://localhost:5089/api/MemberCard/UploadFile"
          :show-file-list="false"
          :on-success="handleAvatarSuccess"
          :before-upload="beforeAvatarUpload"
        >
          <img
            v-if="form.Background"
            :src="'http://localhost:5089/pic/' + form.Background"
            class="avatar"
          />
          <el-icon v-else class="avatar-uploader-icon">
            <Plus />
          </el-icon>
        </el-upload>
      </el-form-item>

      <el-form-item label="会员卡号" prop="VIPCard">
        <el-input v-model="form.VIPCard" />
      </el-form-item>

      <el-form-item label="有效期" prop="Validity">
        <el-radio-group v-model="form.Validity">
          <el-radio :value="true">永久有效</el-radio>
          <el-radio :value="false">有效期一年</el-radio>
        </el-radio-group>
      </el-form-item>

      <el-form-item label="特权说明" prop="Useexplain">
        <el-input v-model="form.Useexplain" type="textarea" />
      </el-form-item>

      <el-form-item label="使用须知" prop="Notice">
        <el-input v-model="form.Notice" type="textarea" />
      </el-form-item>

      <el-form-item>
        <el-button type="primary" @click="AddMember(ruleFormRef)">
          保存
        </el-button>
        <el-button @click="resetForm(ruleFormRef)">取消</el-button>
      </el-form-item>
    </el-form>
  </el-card>
</template>

<script lang="ts" setup>
// 引入组件
import { ElTable } from "element-plus";
import { reactive, ref, onMounted } from "vue";
//引入路由
import { useRouter, useRoute } from "vue-router";
import axios from "axios";
import type { FormInstance, FormRules } from "element-plus";
import { ElMessage, ElMessageBox } from "element-plus";
import { Plus } from "@element-plus/icons-vue";
import type { UploadProps } from "element-plus";

const ruleFormRef = ref<FormInstance>();

//路由变量
const router = useRouter();

//当前页面路由
const route = useRoute();

axios.defaults.baseURL = "http://10.31.59.14:9999/api/";

const form = reactive({
  Brandname: "",
  Title: "",
  Background: "",
  VIPCard: "",
  Validity: "",
  Useexplain: "",
  Notice: "",
  Tenantid: "default",
});

//会员卡校验
const rules = reactive<FormRules>({
  Brandname: [{ required: true, message: "请输入品牌名称", trigger: "blur" }],
  Title: [{ required: true, message: "请输入会员卡标题", trigger: "blur" }],
  VIPCard: [
    { required: true, message: "会员卡号为手机号", trigger: "blur" },
    {
      pattern: /^1[345789]\d{9}$/,
      message: "格式不正确",
      trigger: "blur",
    },
  ],
  Validity: [
    {
      required: true,
      message: "请选择有效期",
      trigger: "change",
    },
  ],
  Useexplain: [{ required: true, message: "请输入特权说明", trigger: "blur" }],
  Notice: [{ required: true, message: "请输入使用须知", trigger: "blur" }],
});

//图片上传成功后
const handleAvatarSuccess = (UrlPic: string) => {
  form.Background = UrlPic;
};

const beforeAvatarUpload: UploadProps["beforeUpload"] = (rawFile: any) => {
  if (rawFile.type == "png/jpg") {
    ElMessage.error("图片上传成功!");
    return false;
  } else if (rawFile.size / 1024 / 1024 > 5) {
    ElMessage.error("图片上传大小不能超过5M!");
    return false;
  }
  return true;
};

// 添加会员信息
const AddMember = async (formEl: FormInstance | undefined) => {
  console.log(formEl);
  if (!formEl) return;
  await formEl.validate((valid, fields) => {
    if (valid) {
      console.log("submit!");
      axios.post("MemberCard/MemberCardAdd", form).then((res) => {
        if (res.data.Code == 200) {
          const mId = res.data.Data;
          ElMessage.success("保存成功!");
          console.log(mId);
          router.push("MemberAdministrator?mId=" + mId);
        } else {
          ElMessage.error("保存失败或已有相同的会员卡号！");
        }
      });
    } else {
      console.log("error submit!", fields);
    }
  });
};
// 取消
const resetForm = (formEl: FormInstance | undefined) => {
  if (!formEl) return;
  formEl.resetFields();
};
</script>

<style>
.avatar-uploader .avatar {
  max-width: 178px;
  max-height: 178px;
  display: block;
}

.avatar-uploader .el-upload {
  border: 1px dashed var(--el-border-color);
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: var(--el-transition-duration-fast);
}

.avatar-uploader .el-upload:hover {
  border-color: var(--el-color-primary);
}

.el-icon.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  text-align: center;
}
</style>
